<template>
  <div class="login-container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="regform"
      label-width="100px"
      class="demo-ruleForm"
    >
      <h2 class="login-title">文具1号商城管理系统-注册</h2>
      <el-form-item label="用户名" prop="name">
        <el-input v-model.trim="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="psw">
        <el-input v-model="ruleForm.psw"></el-input>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" @click="reg">注册</el-button>
        <el-button type="primary" @click="goto">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import userApi from "../../api/userApi"; //引入用户管理的接口
export default {
  data() {
    var checkName = (rule, value, callback) => {
      //zhiwei存在value
      //拿到用户名就发送ajax请求，验证用户名是否存在
      userApi.checkName(value).then(res => {
        if (res.data.flag) {
          //校验通过：可以注册
          callback();
        } else {
          //不能注册
          callback(new Error("该用户名已存在，请换一个"));
        }
      });
    };

    return {
      ruleForm: {
        name: "",
        psw: ""
      },
      rules: {
        //表单校验
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { validator: checkName, trigger: "blur" }
        ],
        psw: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    goto() {
      this.$router.push("/login");
    },

    reg() {
      //上面要设置好 ref属性，下面就通过 this.$refs来找节点
      // console.log(this.$refs.aa);
      this.$refs.regform.validate(valid => {
        //valid为表单验证结果：true就是验证全部通过
        if (valid) {
          // alert("可以注册!");
          let { name, psw } = this.ruleForm;
          let password = this.$md5(psw); //利用md5进行单向加密，这样密码传输的时候就不是明文传输了。
          // console.log(password, 666888);
          userApi.reg(name, password).then(res => {
            // console.log(res.data, 999);
            if (res.data.flag) {
              this.$message({
                message: "注册成功",
                type: "success"
              });
              //跳转到登录页
              this.$router.push({ path: "/login", query: { name } });
            }
          });
        } else {
          // alert("不可以注册!");
          this.$message({
            message: "请填写全部信息",
            type: "error"
          });
          return false;
        }
      });
    }

    //功能：验证用户名是否存在
    // checkName() {
    //   if (this.ruleForm.name) {
    //     userApi.checkName(this.ruleForm.name).then(res => {
    //       console.log(res.data, 666);
    //     });
    //   }
    // }
  }
};
</script>

<style scoped lang="scss">
// 从这里定位
@import "../../assets/sass/reg.scss";
</style>